<template>
	<view class="console-gifts" 
	@mouseenter="handleMouseEnter" 
	@mousemove="handleMouseEnter"
    @mouseleave="handleMouseLeave">
		<view class="link-red-book-btn" v-if="status == 0">
			<rb-bottom-a mod="link" @click="linkRedBookRoom">连接小红书直播间</rb-bottom-a>
		</view>
		<scroll-view scroll-y class="table-view" v-if="status > 0" :scroll-into-view="scrollToFocusId" :scroll-with-animation="scrollToAnimation">
			<block v-for="(story, index) in storys" :key="story.id">
				<gifts-cell :id="'c_story' + story.id" :info="story"/>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	
	import rbBottomA from '@/components/rb-bottom-a/rb-bottom-a.vue'
	import giftsCell from '@/components/gifts-cell/gifts-cell.vue'
	
	export default {
		name:"console-gifts",
		components: {
			rbBottomA,
			giftsCell
		},
		props: {
			status: 0
		},
		data() {
			return {
				storys: [],
				scrollToFocusId: '',
				scrollTo: true,
				scrollToAnimation: false,
				page: 1,
				pageSize: 100
			};
		},
		
		created() {

			// 收到日志
			// window.electronAPI.onConsole_storyAdd((story) => {
			// 	let tempSt = this.storys
			// 	if (this.scrollTo && tempSt.length > this.page * this.pageSize) {
			// 		tempSt.shift()
			// 	}
			// 	this.storys = tempSt
			// 	this.storys.push(story)
			// 	if (this.scrollTo) {
			// 		this.scrollToAnimation = true
			// 		setTimeout(() => {
			// 			this.scrollToFocusId = 'c_story' + story.id
			// 		}, 10)
			// 	}
			// })
			
			window.electronAPI.getGiftsStory().then((storys) => {
				console.log(storys)
				if (storys.length > 0) {
					this.storys = storys
					setTimeout(() => {
						this.scrollToFocusId = 'c_story' + this.storys[this.storys.length - 1].id
					}, 10)
				}
			})
		},
		
		methods: {
			
			linkRedBookRoom() {
				window.electronAPI.linkRedBookRoom()
			},
			
			handleMouseEnter() {
				this.scrollTo = false
			},
			
			handleMouseLeave() {
				this.scrollTo = true
			}
		}
	}
</script>

<style scoped>
	
	.console-gifts {
		width: 100%;
		height: 100%;
		background-color: #272730;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
		display: flex;
		border: #73738f 1px solid;
		box-sizing: border-box;
	}
	
	.link-red-book-btn {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.table-view {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	
	::v-deep ::-webkit-scrollbar {
	  display: block !important; /* 强制显示滚动条 */
	  width: 0;                /* 滚动条的宽度 */
	  height: 0;              /* 滚动条的高度 */
	}
	
	::v-deep ::-webkit-scrollbar-thumb {
	  background-color: #49495a;   /* 滚动条滑块的颜色 */
	  border-radius: 2px;      /* 滚动条滑块的圆角 */
	}
	
	::v-deep ::-webkit-scrollbar-track {
	  background-color: #272730; /* 滚动条轨道的颜色 */
	  border-radius: 10px;       /* 滚动条轨道的圆角 */
	}


</style>